<template>
  <el-scrollbar height="100vh">
    <div class="container">
      <el-affix :offset="1">
        <h1 class="title">自由绘制绘制图形</h1>
      </el-affix>
      <div id="map" class="map-x" ref="mapBox"></div>
      <el-select v-model="tool" class="select" placeholder="Select" size="large">
        <el-option
          v-for="item in tools"
          :key="item.value"
          :label="item.label"
          :value="item.value"
        />
      </el-select>
      <p ref="Txt"></p>
      <dl>
        <dt>自由绘制绘制图形</dt>
        <dd>freehand: true，添加属性freehand就可以进行自由绘制图形。</dd>
      </dl>
      <div class="codestyle"><Code /></div>
    </div>
  </el-scrollbar>
</template>
<script>
import { toRefs, reactive, ref, onMounted, watch } from 'vue-demi'
import Code from './code.vue'
import 'ol/ol.css'
import { Map, View } from 'ol'
import Tile from 'ol/layer/Tile'
import XYZ from 'ol/source/XYZ'
import { Style, Circle as CircleStyle, Stroke, Fill } from 'ol/style'
import VectorSource from 'ol/source/Vector'
import { Vector as VectorLayer } from 'ol/layer'
import Draw from 'ol/interaction/Draw'

export default {
  setup () {
    const state = reactive({
      map: ref(null),
      mapBox: ref(null),
      Txt: ref(null),
      tool: 'LineString', // 当前选中的工具
      tools: [ // 工具集
        {
          value: 'LineString',
          label: '线条'
        },
        {
          value: 'Polygon',
          label: '多边形'
        },
        {
          value: 'Circle',
          label: '圆'
        },
        {
          value: 'None',
          label: '无'
        }
      ],
      draw: null,
      source: new VectorSource({
        wrapX: false // 禁止横向无限重复（底图渲染的时候会横向无限重复），设置了这个属性，可以让绘制的图形不跟随底图横向无限重复
      }),
      raster: new Tile({
        source: new XYZ({
          url: 'https://api.maptiler.com/maps/basic-4326/256/{z}/{x}/{y}.png?key=B3EG5uYPUvFucEWVoCa3',
          crossOrigin: ''
        })
      }),
      modify: null
    })

    // 监听绘制的类型
    watch(() => state.tool, () => {
      addInteraction()
    })

    const init = () => {
      const vector = new VectorLayer({
        source: state.source,
        style: new Style({
          fill: new Fill({
            color: 'rgba(220, 85, 255, 0.6)'
          }),
          stroke: new Stroke({
            color: '#ffcc33',
            width: 2
          }),
          image: new CircleStyle({
            radius: 7,
            fill: new Fill({
              color: '#ffcc33'
            })
          })
        })
      })

      state.map = new Map({
        target: state.mapBox,
        layers: [state.raster, vector],
        view: new View({
          center: [0, 0],
          zoom: 3
        })
      })

      addInteraction()
    }

    // 开始绘制
    const addInteraction = () => {
      if (state.draw !== null) {
        state.map.removeInteraction(state.draw)
      }
      if (state.tool !== 'None') {
        state.draw = new Draw({
          source: state.source,
          type: state.tool,
          freehand: true
        })
        state.map.addInteraction(state.draw)
      }
    }

    onMounted(() => {
      init()
    })

    return {
      init,
      addInteraction,
      ...toRefs(state)
    }
  },
  components: {
    Code
  }
}
</script>
<style lang="scss" scoped>
@import '../../css/main.scss';
.select {
  margin: 20px 0;
}
</style>
